<template>
	<view class="content">
		<view class="nav_title">
			<text @click="back">取消</text>
			<!--  #ifdef APP-PLUS -->
			<view class="center">立即提问</view>
			<!--  #endif -->
			<view class="nav_leftpart" :style="{'margin-left':'66rpx'}" @click="release">发布问题</view>
		</view>
		<view class="input"><input type="text" placeholder="输入问题标题" v-model="titleValue" /></view>
		<view class="prompt">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mark.png"></image>
			<ul>
				<li>保持文字简练，表述清晰问题的关键店</li>
				<li>添加核实的话题，让问题更好地疏通</li>
			</ul>
		</view>
		<view class="textarea"><textarea id="" cols="40" rows="20" placeholder="问题详情内容说明" v-model="stateValue"></textarea></view>
		<view class="topic" @click="showTopicPopup">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/add.png"></image>
			<text>话题</text>
		</view>
		<view class="check">
			<view class="cell" v-for="(cell, idx) in works" :key="idx">#{{ cell.title }}#</view>
		</view>
		<topics :show="show" :list="list" @close="show = false" @selected="selectedTopic"></topics>
	</view>
</template>

<script>
import { addTopic, topicList, hotTopic } from '@/apis/apis.js';
import topics from '../modules/topics.vue';
export default {
	components: {
		topics
	},
	props: {},
	data() {
		return {
			show: false,
			titleValue: '', //输入标题的值
			stateValue: '', //文本域的值
			showTopic: false, //展示话题列表
			topicLists: [], //话题列表数据
			workKey: '', //话题
			works: [],
			list: []
		};
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		//发布问题
		release() {
			let arr = [];
			this.works.forEach(el => {
				arr.push(el.title);
			});
			this.workKey = arr.join(',');
			let data = {
				content: this.stateValue,
				title: this.titleValue,
				workKey: this.workKey,
				memberId: uni.getStorageSync('USER_DATA').memberId,
				status:0
			};
			addTopic(data).then(res => {
				console.log(res, 111);
				uni.showToast({
					title: '发布成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1300);
			});
		},
		//跳转选择话题页面
		async showTopicPopup() {
			const { data } = await hotTopic();
			// console.log(data);
			this.list = data;
			this.show = true;
		},
		selectedTopic(e) {
			console.log(e);
			const boo = this.works.find(el => el.id == e.id);
			if (boo == undefined) {
				this.works.push(e);
			}
			this.show = false;
		}
	},
	mounted() {},
	onLoad(options) {
		this.workKey = options.workKey;
	},
	onUnload() {}
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;

	.nav_title {
		width: 100%;
		padding: 84rpx 50rpx 74rpx 48rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #369cfe;

		& > text {
			color: #5e5e5e;
		}

		.center {
			margin: 0 142rpx 0 142rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: #000;
		}

	}

	.prompt {
		width: 92%;
		margin: 0 auto;
		padding: 30rpx 120rpx 32rpx 24rpx;
		background: #f4fbff;
		color: #8aa1be;
		font-size: 28rpx;
		line-height: 44rpx;
		display: flex;
		// margin: 42rpx 0 34rpx 0;

		& > image {
			width: 38rpx;
			height: 36rpx;
			margin-right: 58rpx;
		}
	}

	.input {
		margin: 0 0 42rpx 48rpx;
	}

	.textarea {
		margin: 34rpx 0 0 48rpx;
	}

	.topic {
		color: #194FC9;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		margin: 0 0 0 48rpx;

		& > image {
			width: 26rpx;
			height: 26rpx;
			margin-right: 6rpx;
		}
	}
}
.check {
	padding: 40rpx;
	display: flex;

	.cell {
		color: #194FC9;
		font-size: 30rpx;
		margin: 0 15rpx;
	}
}
</style>
